<template>
    <div class="tab-bar-wrap" v-show="show">
        <nav>
            <router-link replace class="item" to="/" :class="{active: routeName === 'index'}">
                <div class="icon">
                    <img src="../assets/img/tab-bar/index.png" alt="">
                    <img src="../assets/img/tab-bar/index-active.png" alt="">
                </div>
                <div>首页</div>
            </router-link>
            <router-link replace class="item" to="/goods" :class="{active: routeName === 'goods'}">
                <div class="icon">
                    <img src="../assets/img/tab-bar/course.png" alt="">
                    <img src="../assets/img/tab-bar/course-active.png" alt="">
                </div>
                <div>商品</div>
            </router-link>
            <router-link replace class="item" to="/admin/order" :class="{active: routeName === 'admin-order'}">
                <div class="icon">
                    <img src="../assets/img/tab-bar/customized.png" alt="">
                    <img src="../assets/img/tab-bar/customized-active.png" alt="">
                </div>
                <div>订单</div>
            </router-link>
            <router-link replace class="item" to="/admin" :class="{active: routeName === 'admin-home'}">
                <div class="icon">
                    <img src="../assets/img/tab-bar/admin.png" alt="">
                    <img src="../assets/img/tab-bar/admin-active.png" alt="">
                </div>
                <div>我的</div>
            </router-link>
        </nav>
        <ipx-block></ipx-block>
    </div>
</template>

<script>
    import IpxBlock from './global/ipx-block'

    export default {
        name: "TAB-BAR",
        data() {
            return {}
        },
        computed: {
            routeName() {
                return this.$route.name
            },
            routeMeta() {
                return this.$route.meta
            },
            show() {
                if (window.__wxjs_environment === 'miniprogram') {
                    return false
                }
                return !this.routeMeta.hideFixMenu
            }
        },
        components: {IpxBlock},
        created() {
        },
        methods: {},
    }
</script>

<style lang="scss">
    @import "../../../style/var";

    .tab-bar-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        border-top: 1px solid #f0f0f0;

        nav {
            display: flex;
        }

        .item {
            height: 100px;
            flex: 1;
            font-size: 23px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            color: #666;

            .icon {
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 5px;

                img {
                    width: 90%;
                    display: block;

                    &:nth-child(2) {
                        display: none;
                    }
                }
            }

            &.active {
                color: $main-color;

                .icon {
                    img {
                        &:nth-child(1) {
                            display: none;
                        }

                        &:nth-child(2) {
                            display: block;
                        }
                    }
                }
            }

            &:active {
                opacity: 1;
                background: #f8f8f8;
            }
        }
    }
</style>
